<template>

	<div class="wrapper">

		<parallax class="section page-header header-filter" :style="headerStyle"></parallax>
		<div class="main main-raised">
			<div class="section profile-content">
				<div class="container">
					<div class="md-layout">
						<div class="md-layout-item md-size-50 mx-auto">
							<div class="profile">
								<div class="avatar">

									<template>
										<img :src="img" alt="Circle Image" class="img-raised rounded-circle img-fluid" @click="classicModal = true" />
										<modal v-if="classicModal" @close="classicModalHide">
											<template slot="header">
												<h4 class="modal-title">Modal Title</h4>
											</template>

											<template slot="body">
												<el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"
												 :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
													<img v-if="imageUrl" :src="imageUrl" class="upload-avatar">
													<i v-else class="el-icon-plus uploader-icon-avatar"></i>
													<el-button size="small" type="primary">点击上传</el-button>
												</el-upload>
											</template>

											<template slot="footer">
												<md-button class="md-simple" @click="classicModal = false">确定</md-button>
												<md-button class="md-danger md-simple" @click="classicModal = false">关闭</md-button>
											</template>
										</modal>
									</template>

								</div>
								<div class="name">
									<h3 class="title">珍妮</h3>
								</div>
								<div class="description text-center" style="width: auto;">
									<p>
										本人是XX专业毕业生，熟练手绘，熟练cad,3dmax,vray,photoshop等设计软件，熟练办公软件。懂画施工图，懂一定的对装饰材料和施工方法。　　本人乐观开朗,
										积极好学,健谈,有自信,具有设计的创新思想;对待工作认真负责,细心,能够吃苦耐劳,敢于挑战,并且能够很快融于集体。
									</p>
								</div>
							</div>
						</div>
					</div>
					<div class="profile-tabs" style="margin-top: -10px;">
						<tabs :tab-name="[
													'个人信息',
													'我的课程',
													'我的收藏',
													'修改信息',
													]"
						 :tab-icon="['face', 'palette', 'favorite',  'miscellaneous_services']" plain nav-pills-icons color-button="success">

							<template slot="tab-pane-2">
								<div class="md-layout">
									<div class="md-layout-item md-size-50 ml-auto">
										<img :src="tabPane1[0].image" class="rounded" style="height: 100px;" />
										<img :src="tabPane1[0].image" class="rounded" style="height: 100px;" />
									</div>
									<div class="md-layout-item md-size-50 mr-auto">
										<img :src="tabPane1[0].image" class="rounded" style="height: 100px;" />
										<img :src="tabPane1[0].image" class="rounded" style="height: 100px;" />
									</div>
								</div>
							</template>
							
							<template slot="tab-pane-3">
								
								<div md-card>
									<el-container style="height: 500px; border: 1px solid #eee">
										<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
											<el-menu :default-openeds="['1', '3']">
												<el-submenu index="1">
													<template slot="title">
														<md-icon>bookmarks</md-icon>默认收藏夹
													</template>
													<el-menu-item-group>
														<el-menu-item index="1-1">
															<md-icon>bookmark_border</md-icon>收藏1
														</el-menu-item>
														<el-menu-item index="1-2">
															<md-icon>bookmark_border</md-icon>收藏2
														</el-menu-item>
													</el-menu-item-group>
												</el-submenu>
												
												<el-submenu index="2">
													<template slot="title">
														<md-icon>bookmarks</md-icon>我的收藏夹1
													</template>
													<el-menu-item-group>
														<el-menu-item index="2-1">
															<md-icon>bookmark_border</md-icon>选项1
														</el-menu-item>
														<el-menu-item index="2-2">
															<md-icon>bookmark_border</md-icon>选项2
														</el-menu-item>
													</el-menu-item-group>
												</el-submenu>
												
												<el-submenu index="3">
													<template slot="title">
														<md-icon>bookmarks</md-icon>我的收藏夹2
													</template>
													<el-menu-item-group>
														<el-menu-item index="3-1">
															<md-icon>bookmark_border</md-icon>选项1
														</el-menu-item>
														<el-menu-item index="3-2">
															<md-icon>bookmark_border</md-icon>选项2
														</el-menu-item>
													</el-menu-item-group>
												</el-submenu>
											</el-menu>
										</el-aside>

										<el-container>
											<el-header style="text-align: right; font-size: 12px">
												<el-dropdown>
													<i class="el-icon-setting" style="margin-right: 15px"></i>
													<el-dropdown-menu slot="dropdown">
														<el-dropdown-item>查看</el-dropdown-item>
														<el-dropdown-item>新增</el-dropdown-item>
														<el-dropdown-item>删除</el-dropdown-item>
													</el-dropdown-menu>
												</el-dropdown>
											</el-header>
										</el-container>
									</el-container>
								</div>
							</template>

							<template slot="tab-pane-1">
								<div>
									<md-card>
										<el-descriptions class="margin-top" column="2" border>
											<el-descriptions-item>
												<template slot="label">
													<md-icon>people_alt</md-icon>
													昵称
												</template>
												Bob
											</el-descriptions-item>
											
											<el-descriptions-item>
												<template slot="label">
													<md-icon>card_membership</md-icon>
													账号
												</template>
												24543624
											</el-descriptions-item>
											
											<el-descriptions-item>
												<template slot="label">
													<md-icon>wc</md-icon>
													性别
												</template>
												24543624
											</el-descriptions-item>
											
											<el-descriptions-item>
												<template slot="label">
													<md-icon>local_offer</md-icon>
													标签
												</template>
												<el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false" @close="handleClose(tag)">
													{{tag}}
												</el-tag>
												<el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
												 @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
												</el-input>
												<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
											</el-descriptions-item>
											
											<el-descriptions-item>
												<template slot="label">
													<md-icon>account_box</md-icon>
													角色
												</template>
												学生
											</el-descriptions-item>
											
											<el-descriptions-item>
												<template slot="label">
													<md-icon>directions_run</md-icon>
													年龄
												</template>
												19
											</el-descriptions-item>
											
											<el-descriptions-item>
												<template slot="label">
													<md-icon>local_phone</md-icon>
													电话
												</template>
												12312341234
											</el-descriptions-item>

											<el-descriptions-item>
												<template slot="label">
													<md-icon>more_time</md-icon>
													在线时长
												</template>
												45.7h
											</el-descriptions-item>
											
											<el-descriptions-item>
												<template slot="label">
													<md-icon>email</md-icon>
													邮箱
												</template>
												234245@qq.com
											</el-descriptions-item>
											
											<el-descriptions-item>
												<template slot="label">
													<md-icon>location_on</md-icon>
													联系地址
												</template>
												江苏省苏州市吴中区吴中大道 1188 号
											</el-descriptions-item>
										</el-descriptions>
									</md-card>
								</div>
							</template>

							<template slot="tab-pane-4">
								<form class="has-green" style="width: 60%;margin-left: 230px;">
									<md-field class="has-green" :md-counter="false">
										<label>昵称</label>
										<md-input v-model="nickname" maxlength="10"></md-input>
										<span class="md-helper-text" style="padding-left: 50px;">长度在10以内~</span>
									</md-field>
									<md-field class="has-green">
										<label>密码</label>
										<md-input v-model="password" type="password"></md-input>
									</md-field>
									<md-autocomplete v-model="selectedType" :md-options="types" class="has-green">
										<label>身份</label>
									</md-autocomplete>
									<md-field class="has-green">
										<label>年龄</label>
										<md-input v-model="age" maxlength="" type="number"></md-input>
									</md-field>
									<md-field :md-counter="false" class="has-green">
										<label>电话</label>
										<md-input v-model="telephone" maxlength="11"></md-input>
										<span class="md-helper-text" style="padding-left: 50px;">请输入11位的电话号码~</span>
									</md-field>
									<md-autocomplete v-model="selectedSex" :md-options="sex" class="has-green">
										<label>性别</label>
									</md-autocomplete>
									<md-field class="has-green" :md-counter="false">
										<label>地址</label>
										<md-textarea v-model="address" md-autogrow maxlength="30"></md-textarea>
										<span class="md-helper-text" style="padding-left: 50px;">长度在30以内~</span>
									</md-field>
									<md-field class="has-green">
										<label>上传头像</label>
										<md-file v-model="single" accept="image/*" />
									</md-field>
									<md-field class="has-green">
										<label>个人简介</label>
										<md-textarea v-model="textarea" maxlength="200"></md-textarea>
									</md-field>
									<div align="center">
										<md-button class="md-rose" type="reset">重置</md-button>
										<md-button class="md-success" type="submit" align="center">修改</md-button>
									</div>
								</form>
							</template>
						</tabs>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		Tabs
	} from "@/components";
	import {
		Modal
	} from "@/components";
	export default {
		components: {
			Tabs,
			Modal,
		},
		bodyClass: "profile-page",
		data() {
			return {
				tabPane1: [{
						image: require("@/assets/img/examples/studio-1.jpg")
					},
					{
						image: require("@/assets/img/examples/studio-2.jpg")
					},
					{
						image: require("@/assets/img/examples/studio-4.jpg")
					},
					{
						image: require("@/assets/img/examples/studio-5.jpg")
					}
				],
				tabPane2: [{
						image: require("@/assets/img/examples/olu-eletu.jpg")
					},
					{
						image: require("@/assets/img/examples/clem-onojeghuo.jpg")
					},
					{
						image: require("@/assets/img/examples/cynthia-del-rio.jpg")
					},
					{
						image: require("@/assets/img/examples/mariya-georgieva.jpg")
					},
					{
						image: require("@/assets/img/examples/clem-onojegaw.jpg")
					}
				],
				imageUrl: '',
				tabPane3: [],
				tabPane4: [],
				tabPane5: [],
				nickname: null,
				age: null,
				address: null,
				telephone: null,
				textarea: null,
				password: null,
				classicModal: null,
				classicModalHide: null,
				selectedType: null,
				array: null,
				types: [
					'学生',
					'教师',
					'项目经理',
				],
				selectedSex: null,
				sex: [
					'男',
					'女'
				],
				dynamicTags: ['标签一', '标签二', '标签三'],
				inputVisible: false,
				inputValue: '',
			};
		},
		props: {
			header: {
				type: String,
				default: require("@/assets/img/bg2.jpg")
			},
			img: {
				type: String,
				default: require("@/assets/img/faces/avatar.jpg")
			}
		},
		computed: {
			headerStyle() {
				return {
					backgroundImage: `url(${this.header})`
				};
			}
		},
		methods: {
			//elments-tags
			handleClose(tag) {
				this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
			},

			showInput() {
				this.inputVisible = true;
				this.$nextTick(_ => {
					this.$refs.saveTagInput.$refs.input.focus();
				});
			},

			handleInputConfirm() {
				let inputValue = this.inputValue;
				if (inputValue) {
					this.dynamicTags.push(inputValue);
				}
				this.inputVisible = false;
				this.inputValue = '';
			},
			//字节布局


			//上传头像
			handleAvatarSuccess(res, file) {
				this.imageUrl = URL.createObjectURL(file.raw);
			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.avatar-uploader .el-upload {
		border: 10px dashed green;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.uploader-icon-avatar {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.upload-avatar {
		width: 178px;
		height: 178px;
		display: block;
	}

	.section {
		padding: 0;
	}

	.profile-tabs::v-deep {
		.md-card-tabs .md-list {
			justify-content: center;
		}

		[class*="tab-pane-"] {
			margin-top: 1.213rem;
			padding-bottom: 50px;

			img {
				margin-bottom: 2.142rem;
			}
		}
	}
</style>
